<template>
  <div>
    <eagle-sing-diy
      ref="setzIndex"
      :mzIndex="zIndex"
      :imgMax="max"
      v-on:FilePathClick="filePathClick"
      v-bind:isContinue="true"
    ></eagle-sing-diy>
    <van-field
      class="input_text"
      required
      :label="label"
      :label-width="labelWidth"
    >
      <template #input>
        <div style="width: 100%">
          <div style="display: flex; flex-wrap: wrap" v-if="value">
            <div
              class="sign-img"
              v-for="(imgUrl, index) in _value.split(';')"
              v-bind:key="index"
            >
              <van-image
                class="imgCanvas"
                @click="preview(baseUrl + imgUrl)"
                width="60"
                height="60"
                :src="baseUrl + imgUrl"
                v-if="imgUrl"
              />
              <div class="delImg" @click="delImg(index)">
                <img src="@/assets/Images/AppIcon//icon_cancel.png" />
              </div>
            </div>
          </div>
          <div class="color-blue" @click="showSign()" v-if="isContinue">
            点击签字
          </div>
        </div>
      </template>
    </van-field>
    <van-overlay :show="showImg">
      <div class="imageShow" @click="showImg = false">
        <van-image width="100%" :src="imagePath" />
      </div>
    </van-overlay>
  </div>
</template>
<script>
import EagleSingDiy from './eagle-sing-diy.vue';

export default {
  components: { EagleSingDiy },
  components: {
    EagleSingDiy,
  },
  props: {
    label: {},
    labelWidth: {},
    value: {},
    max: {
      //允许图片最大值   默认int最大值
      type: Number,
      default: 9999,
    },
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      isContinue: false,
      zIndex: -8,
      showImg: false,
      imagePath: "",
    };
  },
  computed: {
    _value: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("update:value", value);
      },
    },
  },
  created() {
    this.isContinue =
      (this.value ? this.value.split(";") : []).length < this.max;
  },
  methods: {
    preview(arry) {
      this.showImg = true;
      this.imagePath = arry;
    },
    filePathClick(images) {
      var imgArry = images.split(";");
      var oldImgArry = this.value ? this.value.split(";") : [];
      for (var i = 0; i < imgArry.length; i++) {
        oldImgArry.push(imgArry[i]);
      }
      this.isContinue = oldImgArry.length < this.max;
      this._value = oldImgArry.join(";");
    },
    showSign() {
      this.zIndex = 8;
      this.$refs.setzIndex.setzIndex(this.zIndex);
    },
    delImg(index) {
      var arry = this.value ? this.value.split(";") : [];
      arry.splice(index, 1);
      this.isContinue = arry.length < this.max;
      this._value = arry.join(";");
    },
  },
};
</script>
<style lang="less" scoped>
.imgCanvas {
  border: 1px solid #ccc;
}
.sign-img{
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}
.delImg {
  position: absolute;
  z-index: 0;
  width: 16px;
  height: 16px;
  right:0px;
  top:0px;
  img {
    width: 100%;
    height: 100%;
  }
}
.imageShow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-image {
  background: #fff !important;
}

</style>
